<template>
	<view class="w-[100%] flex flex-col relative">
		<image src="@/static/images/index_bg/bg_index.png" placeholder
			class="w-[100%] h-[396rpx] z-[-1] absolute top-0"></image>
        <up-navbar placeholder title="宠物详情" :autoBack="true" bgColor="rgba(255,255,255,0)" :titleStyle="{
            color: '#000000',
            fontSize: '34rpx',
            fontWeight: '500'
        }"></up-navbar>
        <view class="flex flex-col items-center justify-center pt-[30rpx]">
            <up-avatar size="200rpx" :src="petInfo.avatar"></up-avatar>
            <view class="flex items-center mt-[24rpx]">
                <view class="text-[32rpx] font-[500] text-[#000000] font-[PingFang SC]">{{ petInfo.name || '猫猫·发财' }}</view>
            </view>
            <image :src="petInfo.sex == 0 ? '/static/images/game_logo/man.png' : '/static/images/game_logo/woman.png'" class="w-[40rpx] h-[40rpx] mt-[8rpx]"></image>
        </view>
        
        <!-- 宠物信息区域 -->
        <view class="px-[98rpx] mt-[60rpx]">
            <!-- 生日信息 -->
            <view class="mb-[30rpx]">
                <text class="text-[28rpx] text-[#000000] font-[500]">生日</text>
                <view class="mt-[16rpx] bg-white rounded-[100rpx] h-[80rpx] flex items-center px-[30rpx]">
                    <text class="text-[28rpx] text-[#333333]">{{ petInfo.birthday || '3-13' }}</text>
                </view>
            </view>
            
            <!-- 设备信息 -->
            <view>
                <text class="text-[28rpx] text-[#000000] font-[500]">设备</text>
                <view class="mt-[16rpx] bg-white rounded-[100rpx] h-[80rpx] flex items-center justify-between px-[30rpx]">
                    <text class="text-[28rpx] text-[#333333]">{{ petInfo.clientId || '设备123' }}</text>
                    <view class="flex items-center">
                        
                        <view class="flex items-center gap-[10rpx]"><battery class="w-[52rpx] h-[26rpx]" :size="2" :value="10"></battery>10%</view>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 底部按钮 -->
        <view class="fixed bottom-[80rpx] left-0 right-0 px-[40rpx] flex flex-col justify-center items-center gap-[20rpx]">
            <view @click="deletePet">
                <image src="@/static/images/img/delate.png" class="w-[538rpx] h-[108rpx]"></image>
            </view>
            <view @click="editPet" class="">
                <image src="@/static/images/img/xiugai.png" class="w-[538rpx] h-[108rpx]"></image>  
            </view>
        </view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getPetDetail, delPet } from '@/api/pet'; // 导入API



// 宠物信息
const petInfo = ref({
    id: '',
    name: '',
    avatar: '',
    sex: 1,
    birthday: '',
    deviceName: '',
    batteryLevel: 0,
    clientId: '',
});

// 获取宠物详情
const fetchPetDetail = async (id) => {
    try {
        uni.showLoading({
            title: '加载中...'
        });
        const res = await getPetDetail(id);
        uni.hideLoading();
        
        if (res.code == 200 && res.data) {
            // 格式化生日，只保留月-日
            let formattedBirthday = '未设置';
            if (res.data.birthday) {
                try {
                    const date = new Date(res.data.birthday);
                    const month = date.getMonth() + 1; // 月份从0开始，需要+1
                    const day = date.getDate();
                    formattedBirthday = `${month}-${day}`;
                } catch (e) {
                    console.error('日期格式化错误:', e);
                }
            }
            
            petInfo.value = {
                id: res.data.id,
                name: res.data.name || '未命名',
                avatar: res.data.avatar || '',
                sex: res.data.sex,
                birthday: formattedBirthday,
                // deviceName: res.data.deviceName || '未绑定设备',
                batteryLevel: res.data.batteryLevel || 0,
                clientId: res.data.clientId || '未绑定设备'
            };
        } else {
            uni.showToast({
                title: res.msg || '获取宠物信息失败',
                icon: 'none'
            });
        }
    } catch (error) {
        uni.hideLoading();
        uni.showToast({
            title: '网络异常，请稍后重试',
            icon: 'none'
        });
        console.error('获取宠物详情失败:', error);
    }
};

// 页面加载
onLoad((options) => {
    if (options.id) {
        fetchPetDetail(options.id);
    } else {
        uni.showToast({
            title: '宠物ID不存在',
            icon: 'none'
        });
        setTimeout(() => {
            uni.navigateBack();
        }, 1500);
    }
});

// 修改宠物信息
const editPet = () => {
    if (!petInfo.value.id) {
        uni.showToast({
            title: '宠物信息不完整',
            icon: 'none'
        });
        return;
    }
    
    uni.navigateTo({
        url: `/pages_cw/modifypets/modifypets?id=${petInfo.value.id}&mode=edit`
    });
};

// 删除宠物
const deletePet = () => {
    if (!petInfo.value.id) {
        uni.showToast({
            title: '宠物ID不存在',
            icon: 'none'
        });
        return;
    }
    
    uni.showModal({
        title: '提示',
        content: '确定要删除该宠物吗？',
        success: async (res) => {
            if (res.confirm) {
                try {
                    uni.showLoading({
                        title: '删除中...'
                    });
                    
                    const result = await delPet(petInfo.value.id);
                    uni.hideLoading();
                    
                    if (result.code == 200) {
                        uni.showToast({
                            title: '删除成功',
                            icon: 'success'
                        });
                        
                        setTimeout(() => {
                            uni.navigateBack();
                        }, 1500);
                    } else {
                        uni.showToast({
                            title: result.msg || '删除失败',
                            icon: 'none'
                        });
                    }
                } catch (error) {
                    uni.hideLoading();
                    uni.showToast({
                        title: '网络异常，请稍后重试',
                        icon: 'none'
                    });
                    console.error('删除宠物失败:', error);
                }
            }
        }
    });
};
</script>

<style scoped lang="scss">
</style>